<template>
    <div>
        <el-button type="primary" class="mb8" @click="choseEdit(3, {})">新增</el-button>
        <el-table :data="dataList" style="height: calc(100vh - 220px)" v-loading="loading">
            <el-table-column label="ID" prop="id" width="100" />
            <el-table-column label="图标" prop="logoImage" width="100" align="center">
                <template #default="scope">
                    <image-preview :src="scope.row.iconImageHost" fit="scale-down" :width="50" :height="50" />
                </template>
            </el-table-column>
            <el-table-column label="名称" prop="name"/>
            <el-table-column label="支持区域" width="200">
                <template #default="scope">
                    <div v-if="scope.row.region === '所有国家'">
                        <el-tag type="primary">{{ scope.row.region }}</el-tag>
                    </div>
                    <div v-else>
                        <el-space spacer=" ">
                            <el-tag type="primary">{{ scope.row.region[0].countryName }}</el-tag>
                            <el-tooltip class="box-item" effect="dark" content="Top Left prompts info"
                                placement="top-start">
                                <template #content>
                                    <div class="content_box">
                                        <el-tag type="info" v-for="item in scope.row.region" :key="item.countryName">{{
                                            item.countryName }}</el-tag>
                                    </div>
                                </template>
                                <el-tag type="primary">More {{ scope.row.region.length }}</el-tag>
                            </el-tooltip>
                        </el-space>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="newStatus" align="center" />
            <el-table-column label="支付类型" prop="paymentMethodCode"  />
            <el-table-column label="当前环境" prop="type" align="center" />
            <el-table-column label="更新时间" prop="newTime" align="center" />
            <el-table-column label="操作" align="center" width="200">
                <template #default="scope">
                    <el-button type="primary" link @click="choseEdit(1, scope.row)">参数</el-button>
                    <el-button type="primary" link @click="choseEdit(2, scope.row)">编辑</el-button>
                    <!-- <el-button type="danger" link @click="choseEdit(0, scope.row)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <Pagination :total="total" :limit="queryParams.pageSize" :page="queryParams.pageNum"
            @pagination="handlePageChange">
        </Pagination>
        <AddPayment :publicItem="publicFrom" :typeIndex="typeIndex" @handleClose="handleClose"
            :showPayment="showPayment" @handleSure="handleSure"></AddPayment>
    </div>
</template>
<script setup name="Brand">
import { ref, reactive, onMounted } from "vue";
import AddPayment from "./components/addPayment.vue";
import { get } from "lodash";
const { proxy } = getCurrentInstance();
const { sys_pay_env } = proxy.useDict("sys_pay_env");
const loading = ref(true);
const total = ref(0);
const dataList = ref([]);
const publicFrom = ref({});
const typeIndex = ref(0);//弹出框类型
const showPayment = ref(false);//默认是false



// 查询参数
const queryParams = ref({
    pageNum: 1,
    pageSize: 20,
    param: {
    },
});

onMounted(() => {
    getList();
})
const getList = () => {
    site.general.payment_wayList({
        data: queryParams.value
    }).then(res => {
        loading.value = false
        total.value = res.total
        if (res.data?.length) {
            res.data = res.data.map(code => {
                return {
                    ...code,
                    region: region(code),
                    newStatus: code.status ? '开启' : '关闭',
                    type: sys_pay_env.value.find(e => e.value === code.environment)?.label,
                    newTime: proxy.DateTime(code.lastModified),
                }
            })
        }
        dataList.value = res.data
    })
}
const choseEdit = (index, row) => {
    publicFrom.value = row
    typeIndex.value = index
    if (index === 1) {
        showPayment.value = true
    } else if (index === 2) {
        showPayment.value = true
    } else if (index === 3) {//新增
        showPayment.value = true
    } else {
        proxy.$modal.confirm("是否删除此数据？").then(() => {
            site.general.payment_wayDeletebatch({
                data: {
                ids: [row.id]
              }
            }).then((res) => {
                if(res.code===200){
                    proxy.$modal.msgSuccess(res.message);
                    getList()
                }
            });
        })

    }

}
const handleSure = () => {
    showPayment.value = false
    getList();
}
const handleClose = () => {
    showPayment.value = false
}
const handlePageChange = (newPage) => {// 分页
    searchFrom.value.pageNum = newPage.page;
    searchFrom.value.pageSize = newPage.limit;
    getList();
};
const region = (row) => {
    if (row.paymentWayCountryLineList && row.paymentWayCountryLineList.length) {
        return row.paymentWayCountryLineList
    } else {
        return '所有国家'
    }
}
</script>
<style lang="scss" scoped>
.content_box {
    max-width: 500px;
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
}
</style>